<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bolk {
            /* none 隐藏元素 不保留之前位置   */
            /* display: none; */
            /* block 显示元素 */
            display: block;
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .none {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: blue;
        }




        .hidd {
            /* 隐藏元素 保留之前位置 */
            /* visibility: hidden/visible;	
            visible 默认值。元素是可见的。
             hidden	元素是不可见的*/
            visibility: visible;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .vie {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }



       .text{
        /* 隐藏溢出部分 */
        overflow: hidden;
        /* 有溢出就显示滑动条 */
        /* overflow: auto; */
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        margin: 0 auto 50px  auto;
       }

    </style>
</head>

<body>
    <div class="bolk"></div>
    <div class="none"></div>


    <div class="hidd"></div>
    <div class="vie"></div>


    <div class="text">
        overflow 属性规定当内容溢出元素框时发生的事情。
        这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
        visible	默认值。内容不会被修剪，会呈现在元素框之外。
        hidden	内容会被修剪，并且其余内容是不可见的。
        scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
        auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    </div>
</body>

</html>